<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>教师列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/css/scroll-bar.css">
    <link rel="stylesheet" href="/css/sub-page.css">
</head>
<body>
<div class="ok-body">
    <!--面包屑导航区域-->
    <div class="ok-body-breadcrumb">
            <span class="layui-breadcrumb">
                <a><cite>首页</cite></a>
                <a><cite>师资管理</cite></a>
                <a><cite>师资列表</cite></a>
            </span>
        <a class="layui-btn layui-btn-sm cms-btn-refresh" href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon layui-icon-refresh"></i>
        </a>
    </div>
    <!--模糊搜索区域-->

    <!--工具栏-->
    <okToolbar>
        <button class="layui-btn" id="addTeacher">
            <i class="layui-icon">&#xe61f;</i>添加师资
        </button>
    </okToolbar>
    <div class="layui-row layui-col-space15 cms-teacher" id="view">


    </div>
    <div id="laypage">
    </div>
</div>
<!--模板-->
<script id="teacherList" type="text/html">
    {{#  layui.each(d.data, function(index, item){ }}
    <div class="layui-col-xs4 layui-col-sm2">
        <div class="layui-card">
            <div class="layui-card-header">
                <h2>{{item.tname}}</h2>
                <div class="layui-layout-right teacher-tool">
                    <div class="layui-btn-group">
                        <button class="layui-btn layui-btn-normal layui-btn-xs btn-edit"
                                title="编辑" lay-data="{{item.tid}}">
                            <i class="layui-icon">&#xe642;</i>
                        </button>
                        <button class="layui-btn layui-btn-danger layui-btn-xs btn-delete"
                                lay-data="{{item.tid}}" title="删除">
                            <i class="layui-icon">&#xe640;</i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="layui-card-body">
                <img src="{{item.photo}}">
            </div>

        </div>
    </div>
    {{#  }); }}
    {{#  if(d.count === 0){ }}
    无数据
    {{#  } }}
</script>
<!--js逻辑-->
<script src="/lib/layui/layui.js"></script>

<script>

    layui.use(['form', 'layer', 'jquery', 'element', 'laypage','laytpl'], function () {
        let element = layui.element;
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.jquery;
        let laypage = layui.laypage;
        let laytpl = layui.laytpl;
        let getTpl = teacherList.innerHTML,
            view = document.getElementById('view');
        //渲染页面
        $.get('/manage/teachers',function (resp) {
            laytpl(getTpl).render(resp, function (html) {
                view.innerHTML = html;
            });
            //分页
            laypage.render({
                elem: 'laypage'
                , count: resp.count
                , limit: 12
                , limits: [12, 24, 36, 48]
                , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                , jump: function (obj) {
                   $.get('/manage/teachers',{curPage:obj.curr,pageSize:obj.limit},function (resp) {
                       laytpl(getTpl).render(resp, function (html) {
                           view.innerHTML = html;
                       });
                   },'json')
                }
            });
        },'json')

        //添加师资
        $("#addTeacher").click(function () {
            var addLayer = layer.open({
                title: '添加老师',
                type: 2,
                maxmin: true,
                shade: 0.5,
                anim: 4,
                area: ['80%', '90%'],
                content: '/manage/teacher/add.html',
                zIndex: layer.zIndex,
                ready: function () {
                    layer.full();
                },
                end: function () {
                    $(".cms-btn-refresh")[0].click();
                }
            });
        });
        //修改老师信息
        $('#view').on('click','.btn-edit',function () {
            let tid = $(this).attr("lay-data")
            let editLayer = layer.open({
                title: '修改老师信息',
                type: 2,
                maxmin: true,
                shade: 0.5,
                anim: 4,
                area: ['80%', '90%'],
                content: '/manage/teacher/edit.html?id=' + tid,
                zIndex: layer.zIndex,
                ready: function () {
                    layer.full();
                },
                end: function () {
                    $(".cms-btn-refresh")[0].click();
                }
            });
        })

        //删除
        $('#view').on('click','.btn-delete',function () {
            let tid = $(this).attr("lay-data")
            layer.confirm("确定要删除吗？", {skin: 'layui-layer-lan', icon: 2, title: '提示', anim: 6}, function () {
                $.ajax({
                    url: '/manage/teachers?tid=' + tid,
                    type: 'DELETE',
                    // dataType: 'json',
                    success: function () {
                        layer.msg("删除成功！", {icon: 6, time: 1000, anim: 4}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                            $(".cms-btn-refresh")[0].click();
                        });
                    },
                    error: function () {
                        layer.msg("删除失败！", {icon: 5, time: 1000, anim: 4}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        });
                    }
                })


            });
        })
    });
</script>
</body>
</html>